@import "/assets/base.scss";
.layout-wrapper{
    display: flex;
    height: 100vh;
    .layout-left, .layout-left-mobile{
        border-right: 1px solid $border;
        width: 30%;
        height: 100%;
        position: relative;
    }
    
    .layout-right , .layout-right-mobile {
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


@media screen and (max-width: 648px) {
    .layout-wrapper{
        min-width: 100%;
        .layout-left{
            width: 100%;
            .tabs-wrapper{
                display: flex;
                justify-content: space-around;
                width: 100%;
                position: fixed;
                bottom: 0;
                border-top: 1px solid $border;
            }
            .home-page-list-wrapper{
                width: 100%;
                height: calc(100% - 46px);
                .home-page-list-content {
                    height: calc(100% - 46px);
                }
            }
        }
        .layout-left-mobile{
            display: none;
        }
        .layout-right {
            width: 100%;
            .back-icon {
                display: inline-block !important;
            }        
        }
        .layout-right-mobile {
            display: none;
        }
    }
}

@media screen and (min-width: 648px) {
    .layout-wrapper{
        min-width: 100%;
        .layout-left,.layout-left-mobile{
            width: 40%;
            display: flex;
            flex-wrap: nowrap;
            .tabs-wrapper{
                padding-top: 120px;
                height: 100%;
                border-right: 1px solid $border;
                .tab{
                    padding-bottom: 30px;
                }
            }
            .home-page-list-wrapper{
                width: 100%;
                .home-page-list-content{
                    height: calc(100% - 50px);
                }
            }
        }
        .layout-right ,.layout-right-mobile{
            width: 60%;
        }
    }
}

@media screen and (min-width: 1025px) {
    .layout-wrapper{
        min-width: 100%;
        .layout-left ,.layout-left-mobile{
            width: 30%;
        }
        .layout-right ,.layout-right-mobile{
            width: 70%;
        }
    }
}

@media screen and (min-width: 1320px) {
    .layout-wrapper{
        min-width: 100%;
        .layout-left{
            width: 25%;
        }
        .layout-right {
            width: 75%;
        }
    }
}

@media screen and (min-width: 1440px) {
    .layout-wrapper{
        min-width: 100%;
        .layout-left{
            width: 20%;
        }
        .layout-right {
            width: 80%;
        }
    }
}